<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { ref } from "vue";
import { getCategorySubListApi, getSubCategoryListApi } from "@/api/category";
import { useRoute } from "vue-router";
import GoodsItem from "../Home/components/GoodsItem.vue";
const route = useRoute();
const categoryData = ref({});
//获取二级分类列表
const getCategorySubList = async (id = route.params.id) => {
  const res = await getCategorySubListApi(id);
  categoryData.value = res.result;
};
getCategorySubList();
//获取商品列表
const goodsList = ref([]);
const paramsData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortField: "publishTime",
});
const getGoodsList = async () => {
  const res = await getSubCategoryListApi(paramsData.value);
  console.log(res.result);
  goodsList.value = res.result.items;
};
getGoodsList();
//tab切换
const tabChange = () => {
  paramsData.value.page = 1;
  getGoodsList();
};
//无限加载
const disabled = ref(false);
const load = async () => {
  paramsData.value.page++;
  const res = await getSubCategoryListApi(paramsData.value);
  //拼接新老数据
  goodsList.value = [...goodsList.value, ...res.result.items];
  if (res.result.items === 0) {
    disabled.value = true;
  }
};
</script>

<template>
  <div class="sub-category container">
    <div class="bread">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryData.parentName }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="filter">
      <el-tabs v-model="paramsData.sortField" @tab-change="tabChange">
        <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
        <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
        <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="goods-list" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
      <li v-for="item in goodsList" :key="item.id">
        <router-link class="pro" :to="`/detail/${item.id}`">
          <img :src="item.picture" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="desc">{{ item.desc }}</p>
          <p class="price"><i>￥</i>{{ item.price }}</p>
        </router-link>
      </li>
      <!-- <GoodsItem v-for="item in goodsList" :key="item.id" :goods="item" /> -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bread {
  height: 70px;
  line-height: 70px;
  padding: 25px 0;
  z-index: 99;
}
.goods-list {
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

li {
  list-style-type: none;
  height: 400px;
  width: 240px;
  position: relative;
  overflow: hidden;
  .pro {
    padding: 10px 20px;
    img {
      width: 180px;
      height: 180px;
      margin: 0;
      text-align: center;
      align-items: center;
    }
    p {
      height: 40px;
      text-align: left;
      align-items: center;
    }
    .name {
      color: black;
      font-size: 16px;
    }
    .desc {
      color: rgb(132, 132, 132);
      font-size: 14px;
    }
    .price {
      font-size: 24px;
      color: brown;
    }
  }
}
</style>
